<template>
    <div class="home">
        <header class="tc ">
            <h1 class="title pr pr20 pl20 f35 cfff fn">
               <router-link class="img pa cfff" to="/mine">
                    <i class="el-icon-arrow-left  f40 "></i>
                </router-link>
                领券中心
            </h1>
        </header>
        <main class="p20">
            <section class="bcf7 mb20 f25">
                <ul class="section mb20" v-for="el in arr">
                    <li class="flex jcsb mb40 ">
                        <div class="asc cfff">
                            ￥<span class="fb" style="font-size: 70rem;">{{el.discounts}}</span>
                        </div>
                        <div class="fl ">
                            <h1 class="mb15 f35" style="color:#ffa07c">{{el.discountsName}}</h1>
                            <p class="mb20 flex jcsb">
                                <span class="f25">满{{el.amountCondition}}元可用</span>
                                <span class="f30" style="background-color: #ff6c12;color: #fff; padding: 15rem 45rem;border-radius: 45rem;" @click="getCard(el.id)">领取</span>
                            </p>
                            <p style="color: #808080;">有效期至:{{formatTime(el.startTime)}}——{{formatTime(el.endTime)}}</p>
                        </div>
                    </li>
                </ul>
            </section>
        </main>
    </div>
</template>
<script>
import {cardList} from '@/api/myCard'
import {AllCard} from '@/api/myCard'
export default {
mounted(){
   this.init();
},
  data(){
    return{
        arr:[]  
    }
  },
  methods:{
    init(){
        AllCard({
        newDate:new Date(),
        // newDate:'2023-03-11',
        state:1,
        userId:1
        }).then(r=>{
            this.arr = r.data;
        })
    },
    getCard(id){
        cardList({
        userId:1,
        discountsId:id 
    }).then(r=>{
        // console.log(r);
        this.open(r.message,r.code)
    });
    },
    formatTime(time){
        var str = JSON.stringify(new Date(time));
        return str.substr(1,10);
    },
    open(message,code){
        if(code ==300){
            this.$message(message);
        }
    }
  }
}
</script>
<style scoped>
.mb35{margin-bottom: 35rem;}
.asc{align-self:center;}
.bcf7{background-color: #f7f7f7;}
.line{height: 1rem;background-color: #f7f7f7;}
.line-dash{border: dashed 2rem;}
/* .home{background-color: #f7f7f7;} */
/* 头部样式  ---需要可剪切 */
header .title{height: 145rem;line-height: 145rem;}
header{height:435rem;background-color: #3385fd;}
header  .img{width: auto;left: 20rem;top: 0;}

main {margin-top: -310rem;}

body{background-color: red !important;}
/* 手机端必须加上这一句--体验感 */
main{margin-bottom: 120rem;}
main section{padding: 40rem 30rem;border-radius: 20rem;box-sizing: border-box;} 
main ul {height: 225rem;background: url(../../../assets/img/myCar-Coupon/group5.png) no-repeat;padding: 30rem 40rem;box-sizing: border-box; background-size: 100% 225rem;}
</style>